<template>
  <view class="address-popu">
    <view class="header">
      <text class="title">选择收获地址</text>
    </view>
    <scroll-view scroll-y="true" class="my-scroll-view">

      <view class="list-container">
        <view class="list-item" @click="choiceAddress(item)" v-for="(item, index) in listData" :key="index">
          <view class="container">
            <view class="item-main">
              <text class="item-name">收货人:{{ item.name }}</text>
            </view>
            <view class="item-details">
              <text class="item-mobile">电话: {{ item.mobile }}</text>
              <text class="item-area">区域: {{ item.areaName }}</text>
              <text class="item-address">详细地址: {{ item.detailAddress }}</text>
            </view>
            <view class="item-do" @click="gotoCreate(item.id)">
              编辑
            </view>
          </view>
        </view>
      </view>
      <view v-if="listData.length === 0" class="no-data-image">
        <image src="http://122.114.92.39:9000/xingyue/system/nonedata.png" mode="aspectFit"></image>
      </view>
    </scroll-view>
    <view class="card" @click="gotoCreate">
      <view class="buy-btn">添加收货信息</view>
    </view>

  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    useUserInfo
  } from '@/stores/userinfo.js';
  import {
    useSwitch
  } from '@/stores/switch.js'
  import {
    ref,
    watch
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const userInfo = useUserInfo()
  onLoad(() => {
    //判断登录信息
    userInfo.getLoginInfo()
    fetchAddressList()
  })

  function goback() {
    uni.navigateBack()
  }
  const listData = ref([])
  async function fetchAddressList() {
    //获取陪诊数据
    const result = await http.getRequest("/member/address/list")
    if (result.code == 0) {
      listData.value = result.data
    } else {
      uni.showToast({
        title: '获取地址信息失败',
        icon: 'error',
        duration: 1000
      })
    }
  }
  //传值给父
  const emit = defineEmits(['sendAddress:value']); // 定义可以触发的自定义事件
  function choiceAddress(address) {
    console.log(address);
    emit('sendAddress:value', address); // 触发事件并传递值  
  }
  //创建收货地址
  function gotoCreate(id) {
    uni.navigateTo({
      url: `/pages/my/address/create-address/create-address?id=${id}`
    })
  }

  watch(() => useSwitch().reloadPaitent, (newCode, oldCode) => {
    console.log('newCode', newCode);
    console.log('oldCode', oldCode);
    if (newCode) {
      fetchPaitentList()
      useSwitch().controlReloadPaitent(false)
    }
  });
</script>

<style lang="scss" scoped>
  .header {
    .title {
      margin: 20rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 40rpx;
    }
  }

  .my-scroll-view {
    height: 800rpx;
    padding-bottom: 100rpx;
  }



  .container {
    background-color: #f9f9f9;
    /* 容器背景色 */
  }

  .list-container {
    display: flex;
    flex-direction: column;
  }

  .list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 27rpx;
    background-color: #fff;
    /* 列表项背景色 */
    border: 1px solid #ddd;
    /* 列表项边框 */
    border-radius: 5px;
    /* 边框圆角 */
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    padding: 25rpx;
    /* 内边距 */
    transition: all 0.3s ease;
    /* 过渡效果，用于鼠标悬停等交互 */
    position: relative;
  }

  .list-item:hover {
    transform: translateY(-2px);
    /* 鼠标悬停时微微上移 */
    box-shadow: 0 8rpx 15rpx rgba(0, 0, 0, 0.2);
    /* 加深阴影效果 */
  }

  .list-item:last-child {
    margin-bottom: 0;
  }

  .item-main {
    display: flex;
    align-items: center;
  }

  .item-name {
    font-size: 31rpx;
    font-weight: bold;
    color: #333;
    /* 姓名字体颜色 */
    margin-right: 18rpx;
  }


  .item-details {
    display: flex;
    flex-direction: column;
    margin-top: 18rpx;
    /* 与上方内容的间距 */
  }

  .item-mobile,
  .item-address,
  .item-area {
    font-size: 24rpx;
    color: #555;
    /* 详细信息字体颜色 */
    margin-top: 10rpx;
  }

  .item-do {
    background-color: #22b9a3;
    color: #f9f9f9;
    width: 150rpx;
    text-align: center;
    padding: 10rpx;
    border-radius: 50rpx;
    position: absolute;
    top: 80rpx;
    right: 30rpx;
  }

  .defaultAddress {
    margin-top: 20rpx;
    font-size: 31rpx;
    font-weight: bold;
  }

  .no-data-image image {
    position: absolute;
    top: 600rpx;
    left: 10%;
    width: 658rpx;
    height: 526rpx;
  }

  .card {
    position: fixed;
    bottom: 10rpx;
    width: 100%;
    text-align: center;
    padding: 20rpx;
    // border: 1rpx solid #ddd;
    border-radius: 10rpx;
    background-color: #fff;
  }


  .buy-btn {
    margin: 10rpx;
    padding: 10rpx 40rpx;
    width: 80%;
    height: 50rpx;
    line-height: 50rpx;
    background-color: #22b9a3;
    color: #fff;
    border-radius: 50rpx;
    text-align: center;
    font-size: 35rpx;
  }
</style>